<style>

</style>

<template>

  <div class="shops">
    <el-tabs v-model="activeTab" type="card" style="width: 1300px;border: none">
      <!--          模糊查询-->
      <el-form v-show="activeTab!='healthRecords3'" ref="form" :model="form" label-width="30px">
        <el-form-item label="">
                    <span v-show="activeTab=='healthRecords'">
                      流水号：<el-input v-model="form.serialNumber" style="margin-right: 30px;width: 200px"></el-input>
                    </span>
          <span v-show="activeTab!='healthRecords'">
          店铺ID：
          <el-input v-model="form.id" style="margin-right: 20px;width: 200px"></el-input>
          </span>
          <span v-show="activeTab=='healthRecords'">
                店铺ID：
                <el-input v-model="form.bid" style="margin-right: 20px;width: 200px"></el-input>
                </span>
          <span v-show="activeTab=='healthRecords'">
                店铺名称：
                <el-input v-model="form.bname" style="margin-right: 20px;width: 200px"></el-input>
                </span>
          <span v-show="activeTab!='healthRecords'">
                店铺名称：
                <el-input v-model="form.name" style="margin-right: 20px;width: 200px"></el-input>
                </span>
          <span v-show="activeTab=='healthArchives'">
                  真实姓名：<el-input v-model="form.zname" style="margin-right: 20px;width: 200px"></el-input>
                </span>
          <span v-show="activeTab=='healthArchives'">
          手机号码：
          <el-input v-model="form.tel" style="margin-right: 20px;width: 200px"></el-input>
          </span>
          <span v-show="activeTab=='healthRecords'">
                  审核类型：
                <el-select v-model="form.type" placeholder="全部" style="width: 183px;margin-right: 20px">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="店铺LOGO" value="1"></el-option>
                  <el-option label="经营品类" value="2"></el-option>
                  <el-option label="店铺门面图" value="3"></el-option>
                  <el-option label="店铺环境图片" value="4"></el-option>
                  <el-option label="店铺名称" value="5"></el-option>
                </el-select>
               </span>

          <span v-show="activeTab=='healthRecords2'">
                  接单手机：
                 <el-input v-model="form.tel" style="margin-right: 20px;width: 200px"></el-input>
               </span>
          <span v-show="activeTab=='healthRecords2'">
            主营品类：
            <el-select v-model="form.main" placeholder="全部" style="width: 183px;margin-right: 20px">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="小吃" value="小吃"></el-option>
                  <el-option label="咖啡" value="咖啡"></el-option>
                </el-select>
          </span>
        </el-form-item>
        <el-form-item label="">
              <span v-show="activeTab!='healthRecords'">
                  所在地：
                <el-cascader
                    style="width: 200px;margin-right: 20px"
                  size="large"
                  :options="pcaTextArr"
                  v-model="selectedOptions">
      </el-cascader>
              </span>

          <span v-show="activeTab=='healthRecords2'">
            配送方式： <el-select v-model="form.distributionType" placeholder="全部" style="width: 200px;margin-right: 20px">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="平台专送" value="平台转送"></el-option>
                  <el-option label="商家配送" value="商家配送"></el-option>
                </el-select>
          </span>
          <span v-show="activeTab=='healthRecords2'">
            评分：  <el-input v-model="form.start" style="margin-right: 0px;width: 100px" placeholder="最低"></el-input>至
            <el-input v-model="form.end" style="margin-right: 20px;width: 100px" placeholder="最高"></el-input>
          </span>
          <span v-show="activeTab=='healthArchives2'">开店时间：</span>
          <span v-show="activeTab!='healthArchives2'">提交时间：</span>
          <el-select v-model="form.ztime" placeholder="全部" style="width: 200px;margin-right: 20px">
            <el-option label="全部" value=""></el-option>
            <el-option label="近三个月" value="1"></el-option>
            <el-option label="今年内" value="2"></el-option>
            <el-option label="2022年" value="3"></el-option>
            <el-option label="2021年" value="4"></el-option>
            <el-option label="2020年" value="5"></el-option>
            <el-option label="2020年以前" value="6"></el-option>
          </el-select>
          <span v-show="activeTab=='healthArchives'">
                  审核时间： <el-date-picker type="date" placeholder="yyyy/mm/日" value-format="yyyy-MM-dd" v-model="form.reviewTime" style="width:200px;margin-right: 20px"></el-date-picker>
                </span>
          <span v-show="activeTab=='healthArchives'">
                  审核状态：
                <el-select v-model="form.auditStatus" placeholder="全部状态" style="width: 200px;margin-right: 20px">
                  <el-option label="全部状态" value=""></el-option>
                  <el-option label="待审核" value="1"></el-option>
                  <el-option label="审核通过" value="8"></el-option>
                  <el-option label="审核拒绝" value="9"></el-option>
                </el-select>
                </span>

          <span v-show="activeTab=='healthRecords'">
                  审核状态：
                <el-select v-model="form.status" placeholder="全部状态" style="width: 200px;margin-right: 20px">
                  <el-option label="全部状态" value=""></el-option>
                  <el-option label="待审核" value="1"></el-option>
                  <el-option label="审核通过" value="3"></el-option>
                  <el-option label="审核拒绝" value="4"></el-option>
                </el-select>
                </span>
          <span v-show="activeTab=='healthRecords'">
                  审核人：<el-input v-model="form.reviewers" style="margin-right: 20px;width: 210px"></el-input>
              </span>
        </el-form-item>
        <el-form-item>
           <span v-show="activeTab=='healthArchives'">
                  审核人：<el-input v-model="form.reviewers" style="margin-right: 20px;width: 210px"></el-input>
              </span>
                 <span v-show="activeTab=='healthRecords2'">
                  用户状态：
                <el-select v-model="form.shopStatus" placeholder="全部状态" style="width: 200px;margin-right: 20px">
                  <el-option label="全部状态" value=""></el-option>
                  <el-option label="带营业" value="1"></el-option>
                  <el-option label="营业中" value="2"></el-option>
                  <el-option label="休息中" value="3"></el-option>
                  <el-option label="已禁用" value="4"></el-option>
                  <el-option label="已注销" value="5"></el-option>
                </el-select>
                </span>
        </el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button v-show="activeTab!='healthRecords1'" type="primary" @click="findAllSettled">搜索</el-button>
<!--        <el-button v-show="activeTab=='healthArchives'" type="primary" @click="findAllAudit">搜索</el-button>-->
      </el-form>


            <el-tab-pane label="开店申请审核" name="healthArchives">
              <el-card style="border-color:white">
                <!--          表格部分-->
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop=""  label="ID">
                    <template slot-scope="scope">
                     <span @click="dispose(scope.row)"> {{ scope.row.id }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="店铺名称"></el-table-column>
                  <el-table-column prop="tel" label="接单手机"></el-table-column>
                  <el-table-column prop="" label="主营/辅营">
                    <template slot-scope="scope">
                      {{ scope.row.main }}/{{ scope.row.auxiliary }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="所在地"></el-table-column>
                  <el-table-column prop="distributionType" label="配送方式">
                  </el-table-column>
                  <el-table-column prop="point" label="评分"></el-table-column>
                  <el-table-column prop="count" label="商品"></el-table-column>
                  <el-table-column prop="openingTime" label="开店时间"></el-table-column>
                  <el-table-column prop="" label="状态">
                    <template slot-scope="scope">
                      {{scope.row.auditStatus==1?'待审核':scope.row.auditStatus==8?'审核通过':scope.row.auditStatus==9?'审核拒绝':''}}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                          type="text"
                          size="small"
                          v-if="scope.row.auditStatus==1"
                          @click="dispose(scope.row)"
                      >查看并处理
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="current2"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total2">
                </el-pagination>
              </el-card>
            </el-tab-pane>




            <el-tab-pane label="店铺信息审核" name="healthRecords">
              <el-card style="border-color:white">
                <!--          表格部分-->
                <el-table :data="tableDataAudit" style="width: 100%">
                  <el-table-column prop="serialNumber" label="流水号"></el-table-column>
                  <el-table-column prop="id" label="店铺ID"></el-table-column>
                  <el-table-column prop="bname" label="店铺名称"></el-table-column>
                  <el-table-column prop="" label="审核类型">
                    <template slot-scope="scope">
                      {{ scope.row.type == 1 ? '店铺LOGO' : scope.row.type == 2 ? '经营品类' :scope.row.type == 3 ? '店铺门面图' : scope.row.type == 4 ? '店铺环境图片' :scope.row.type == 5 ? '店铺名称' :scope.row.type == 6 ? '店铺广告' :scope.row.type == 7 ? '外卖店招' :'团购店招'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="newInformation" label="新信息"></el-table-column>
                  <el-table-column prop="oldInformation" label="旧信息"></el-table-column>
                  <el-table-column prop="submissionTime" label="提交时间"></el-table-column>
                  <el-table-column prop="" label="状态">
                    <template slot-scope="scope">
                      {{ scope.row.status == 1 ? '待审核' : scope.row.status == 3 ? '审核通过' :  scope.row.status == 4 ? '审核拒绝' :''}}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                          type="text"
                          size="small"
                          v-if="scope.row.status==1"
                          @click="auditSettled(scope.row)"
                      >查看并处理
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="current1"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize1"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total1">
                </el-pagination>

              </el-card>
            </el-tab-pane>



      <!--      已入驻的店铺-->
      <el-tab-pane label="已入驻店铺" name="healthRecords2">
                <el-card style="border-color:white">
                  <!--          表格部分-->
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="ID">
                      <template slot-scope="scope">
                        <span @click="settledXq(scope.row)"> {{ scope.row.id }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="店铺名称"></el-table-column>
                    <el-table-column prop="tel" label="接单手机"></el-table-column>
                    <el-table-column prop="" label="主营/辅营">
                      <template slot-scope="scope">
                        {{ scope.row.main }}/{{ scope.row.auxiliary }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="address" label="所在地"></el-table-column>
                    <el-table-column prop="distributionType" label="配送方式">
                    </el-table-column>
                    <el-table-column prop="point" label="评分"></el-table-column>
                    <el-table-column prop="count" label="商品"></el-table-column>
                    <el-table-column prop="openingTime" label="开店时间"></el-table-column>
                    <el-table-column prop="" label="状态">
                      <template slot-scope="scope">
                       {{scope.row.shopStatus==1?'待营业':scope.row.shopStatus==2?'营业中':scope.row.shopStatus==3?'休息中':scope.row.shopStatus==4?'已禁用':'已注销'}}
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            v-if="scope.row.accountStatus === 2||scope.row.accountStatus === 4"
                            @click="lockk(scope.row)"
                        >锁定用户/冻结用户
                        </el-button>
                        <el-button
                            type="text"
                            size="small"
                            v-if="scope.row.accountStatus === 1||scope.row.accountStatus === 3"
                            @click="unlockk(scope.row)"
                        >解锁用户/解冻用户
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination
                      @size-change="handleSizeChange2"
                      @current-change="handleCurrentChange2"
                      :current-page="current2"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pageSize2"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total2">
                  </el-pagination>
                </el-card>
      </el-tab-pane>


      <!--      未开店商家-->
      <el-tab-pane label="未开店商家" name="healthRecords3">
        <el-card style="border-color:white">
          <!--          模糊查询部分-->
          <el-form ref="form" :model="formBusiness" label-width="0px">
            <el-form-item label="">
              商家ID：
              <el-input v-model="formBusiness.id" style="margin-right: 16px;width: 160px"></el-input>
              手机号码：
              <el-input v-model="formBusiness.mobilePhone" style="margin-right: 16px;width: 160px"></el-input>
              申请次数：
              <el-input v-model="formBusiness.count" style="margin-right: 16px;width: 160px"></el-input>
              注册时间：
              <el-select v-model="formBusiness.ztime" placeholder="全部" style="width: 160px;margin-right: 20px">
                <el-option label="全部" value=""></el-option>
                <el-option label="近三个月" value="1"></el-option>
                <el-option label="今年内" value="2"></el-option>
                <el-option label="2022年" value="3"></el-option>
                <el-option label="2021年" value="4"></el-option>
                <el-option label="2020年" value="5"></el-option>
                <el-option label="2020年以前" value="6"></el-option>
              </el-select>
              状态：
              <el-select v-model="formBusiness.status" placeholder="全部状态" style="width: 160px;margin-right: 0px">
                <el-option label="全部状态" value=""></el-option>
                <el-option label="未申请" value="1"></el-option>
                <el-option label="申请中" value="2"></el-option>
                <el-option label="已驳回" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" @click="reset">重置</el-button>
            <el-button v-show="activeTab!='healthArchives'" type="primary" @click="searchBusiness">搜索</el-button>
          </el-form>
          <!--                    表格部分-->
          <el-table :data="tableDataBusiness" style="width: 100%">
            <el-table-column prop="id" label="ID"></el-table-column>
            <!--            <el-table-column prop="name" label=""></el-table-column>-->
            <el-table-column prop="mobilePhone" label="手机号码"></el-table-column>
            <el-table-column prop="count" label="申请次数"></el-table-column>
            <el-table-column prop="registration" label="注册时间"></el-table-column>
            <el-table-column prop="" label="状态">
              <template slot-scope="scope">
                {{ scope.row.status == 1 ? '未申请' : scope.row.userStatus == 2 ? '申请中' : '已驳回' }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.businessStatus === 2"
                    @click="lockk(scope.row)"
                >锁定用户
                </el-button>
                <el-button
                    type="text"
                    size="small"
                    v-if="scope.row.businessStatus === 1"
                    @click="unlockk(scope.row)"
                >解锁用户
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange3"
              @current-change="handleCurrentChange3"
              :current-page="current3"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize3"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total3">
          </el-pagination>
        </el-card>
      </el-tab-pane>

      <!--          锁定账号的弹出框-->
      <el-dialog title="确定锁定该商家？" :visible.sync="dialogFormVisible">
        商家账号被锁定后将无法申请开店，请慎重操作！<br>
        <el-form :model="lockBusiness" style="margin-top: 25px">
          <el-form-item label="锁定原因：" style="width: 300px">
            <el-select v-model="lockBusiness.lockdownReason" placeholder="请选择原因" style="width: 200px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="账号出现问题" value="1"></el-option>
              <!--        <el-option label="" value="1"></el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="补充说明：">
            <el-input placeholder="请输入" v-model="lockBusiness.illustrate" style="width: 600px"
                      @input="getData"></el-input>
            {{ count }}/10（选填）
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;qx()">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false;qd()">确 定</el-button>
        </div>
      </el-dialog>


      <!--          解锁的弹框-->
      <el-dialog title="确定解锁该用户？" :visible.sync="dialogFormVisible2">
        用户解锁后将恢复下单、评价、请谨慎操作！<br>
        <div slot="footer" class="dialog-footer" style="margin-top: 20px">
          <el-button @click="dialogFormVisible2 = false;qx()">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible2 = false;qd()">确 定</el-button>
        </div>
      </el-dialog>
    </el-tabs>
  </div>

</template>

<script>


import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

export default {
  data() {
    return {
      activeTab: 'healthArchives',
      tableData: [],
      tableDataAudit: [],
      current: 1,
      current1: 1,
      current2: 1,
      current3: 1,
      pageSize: 10,
      pageSize1: 10,
      pageSize2: 10,
      pageSize3: 10,
      total: 0,
      total1: 0,
      total2: 0,
      total3: 0,
      form: {},
      formBusiness: {},
      dialogFormVisible: false,
      dialogFormVisible2: false,
      lockBusiness: {},
      tableDataBusiness: [],
      count: 0,
      pcaTextArr,
      selectedOptions:[],
    }
  },
  methods: {
    //   未入驻的店铺
    //   分页方法
    handleSizeChange3(val) {
      this.pageSize3 = val;
      this.findAllBusiness();
    },
    handleCurrentChange3(val) {
      this.current3 = val;
      this.findAllBusiness();
    },
    handleSizeChange2(val) {
      this.pageSize2 = val;
      this.findAllSettled();
    },
    handleCurrentChange2(val) {
      this.current2 = val;
      this.findAllSettled();
    },
    handleSizeChange1(val){
      this.pageSize1 = val;
    },
    handleCurrentChange1(val){
      this.current1 = val;
    },
    //   查询未入驻的店铺
    findAllBusiness() {
      this.axios.post(`http://localhost:8000/xm-client/xm-business/findAll?current=${this.current3}&pageSize=${this.pageSize3}`, this.formBusiness).then(res => {
        this.tableDataBusiness = res.data.data.records;
        this.total3 = res.data.data.total;
        if (this.current3 > res.data.data.pages) {
          this.current3 = res.data.data.pages;
          this.findAllBusiness();
        }
      })
    },
    //   重置方法
    reset() {
      this.form = {};
      this.selectedOptions=[];
      this.findAllBusiness();
    },
    //   搜索方法
    searchBusiness() {
      this.findAllBusiness();
    },
    //   取消方法
    qx() {
      this.lockBusiness = {};
    },
    //   锁定商户方法
    lockk(row) {
      this.dialogFormVisible = true;
      this.lockBusiness = row;
    },
    //   解锁商户
    unlockk(row) {
      this.dialogFormVisible2 = true;
      this.lockBusiness = row;
    },
    //   确定方法
    qd() {
     if(this.lockBusiness.name!="" && this.lockBusiness.name!=null){
       if(this.lockBusiness.accountStatus==2){
         this.lockBusiness.accountStatus=1;
       }else{
         this.lockBusiness.accountStatus=2;
         this.lockBusiness.lockk = "0";
         this.lockBusiness.supplement= "";
       }
       this.axios.post(`http://localhost:8000/xm-client/xm-settled/updateSettled`, this.lockBusiness).then(res => {
         if (res.data.code == 200) {
           this.$message({
             message: '操作成功',
             type: 'success'
           });
         }
       })
     }else{
       if (this.lockBusiness.businessStatus == 2) {
       this.lockBusiness.businessStatus = 1;
     } else {
       this.lockBusiness.businessStatus = 2;
       this.lockBusiness.lockdownReason = "0";
       this.lockBusiness.illustrate = "";
     }
       this.axios.post(`http://localhost:8000/xm-client/xm-business/updateBusiness`, this.lockBusiness).then(res => {
         if (res.data.code == 200) {
           this.$message({
             message: '操作成功',
             type: 'success'
           });
         }
       })
     }
    },
    // 补充说明
    getData() {
      this.count = this.lockBusiness.illustrate.length;
      if (this.count >= 10) {
        this.$message({
          message: '最多可输入10个字',
          type: 'warning'
        });
      }
      this.lockBusiness.illustrate = this.lockBusiness.illustrate.substring(0, 9);
    },


    //   已入驻的店铺
    findAllSettled(){
      if(this.selectedOptions.length!=0){
        this.form.address=this.selectedOptions[2];
      }
      this.form.activeTab=this.activeTab;
      this.axios.post(`http://localhost:8000/xm-client/xm-settled/findAll?current=${this.current2}&pageSize=${this.pageSize2}`, this.form).then(res=>{
        this.tableData = res.data.data.records;
        this.total2 = res.data.data.total;
        if(this.current2>res.data.data.pages){
          this.current2 = res.data.data.pages;
          this.findAllSettled();
        }
      })
    },


  //   开店申请审核
  //   查看并处理
    dispose(row){
      localStorage.setItem("settled",JSON.stringify(row));
      this.$router.push("/dispose");
    },


  //   查询审核的所有
    findAllAudit() {
      this.axios.post(`http://localhost:8000/xm-client/xm-auditbusiness/findAll?current=${this.current1}&pageSize=${this.pageSize1}`, this.form).then(res => {
        this.tableDataAudit = res.data.data.records;
        this.total1 = res.data.data.total;
        if (this.current1 > res.data.data.pages) {
          this.current1 = res.data.data.pages;
         this.findAllAudit();
        }
      })
    },


  //   修改信息进行审核
    auditSettled(row){
      localStorage.setItem("settled",JSON.stringify(row));
      this.$router.push("/auditSettled");
    },


  //   跳转到商家详情页面
    settledXq(row){
      localStorage.setItem("settled",JSON.stringify(row));
      this.$router.push({path:'/settledXq'});
    },
  },

  watch: {
    activeTab(newz,oldz) {
      this.findAllSettled();
      this.findAllBusiness();
      this.findAllAudit();
    }
  },

  created() {
    this.findAllBusiness();
    this.findAllSettled();
    this.findAllAudit();
  }
}
</script>
